<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
	<title>TinyAutoSave 2.1.3 Demo</title>

	<script type="text/javascript" src="tinymce/tiny_mce.js"></script>
	<script type="text/javascript" src="tinymce/plugins/tinyautosave/editor_plugin.js"></script>
	<script type="text/javascript">
		tinyMCE.init({
			mode: "textareas",
			theme: "advanced",
			plugins: "tinyautosave",
			theme_advanced_buttons1_add_before: "tinyautosave",
			tinyautosave_oninit: "configAutoSave"
		});
		
		function configAutoSave() {
			if (this.id == "ed1") {
				this.onPreSave = "ed1PreSave";  // Assigned with string
			}
			else if (this.id == "ed2") {
				this.onPostSave = function () {  // Assigned with function
					alert("onPostSave occurred in Editor 2.");
				};
			}
		}
		
		function ed1PreSave() {
			return confirm("onPreSave occurred in Editor 1. Do you want to continue with the autosave?");
		}
		
		function randomChars() {
			var c = 'a'.charCodeAt(0);
			
			for (var x=1; x<3; x++) {
				var h = [];
				
				for (var y=0; y<100; y++) {
					h[y] = "";
					
					for (var z=0, l=Math.ceil(Math.random()*9); z<l; z++) {
						h[y] += String.fromCharCode(c + Math.floor(Math.random()*26));
					}
					
					tinyMCE.get('ed' + x).setContent(h.join(" "));
				}
			}
		}
	</script>

</head>
<body>

	<h1>TinyAutoSave Plugin</h1>
	<h2>v 2.1.3</h2>

	<p>This demonstrates the ability to have two distinct autosave storage spaces on the same page.</p>
	<ol>
		<li>Click the <strong>Random Characters</strong> button to fill the editors with test data</li>
		<li>Click the <strong>Oops, Refreshed Page</strong> button to simulate refreshing the page accidentally.</li>
		<li>Upon clicking each autosave rescue button you will notice that editor's unique input was retrieved.</li>
	</ol>
	<p>
		<input type="button" value="Random Characters" onclick="randomChars();return false;" />
		<input type="button" value="Oops, Refreshed Page" onclick="location.replace(location.href);return false;" />
	</p>
	<form method="post" action="#">
		<h3>Editor 1</h3>
		<textarea id="ed1" name="ed1" style="width:100%"></textarea>
		<h3>Editor 2</h3>
		<textarea id="ed2" name="ed2" style="width:100%"></textarea>
	</form>
	
</body>
</html>
